<template>
  <Teleport to="body">
    <!-- 弹窗组件 -->
    <nut-popup v-model:visible="isShow" style="border-radius:15px;background:transparent;"
      :close-on-click-overlay="false" :z-index="zindex" customClass="pop-class">
      <div class="popup-header" v-if="showHeader">
        {{ title }}
        <iconpark-icon v-if="showClose" icon-id="exit" size="1.25rem" class="close_icon"
          @click="isShow = false"></iconpark-icon>
      </div>
      <div class="popup-body">
        <slot></slot>
      </div>
    </nut-popup>
  </Teleport>
</template>

<script setup lang='ts'>
import { computed } from 'vue';
// import { useRouter } from 'vue-router'
// import { Net } from '@/utils/net/Net';
// import { MessageEvent2 } from '@/utils/net/MessageEvent2';
// import { NetPacket } from '@/utils/net/NetPacket';
// import { NetMsgType } from '@/utils/net/NetMsgType';

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  zindex: {
    type: [Number, String],
    default: '9999'
  },
  visible: {
    type: Boolean,
    default: false,
  },
  showClose: {
    type: Boolean,
    default: true,
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
})
const emit = defineEmits(['update:visible', 'close']);
const isShow = computed({
  get: function () {
    return props.visible;
  },
  set: function (value: any) {
    emit('update:visible', value);
    emit('close');

  },
});




</script>

<style lang='scss' scoped>
.popup-header {
  width: calc(100vw - 30px);
  height: 48px;
  line-height: 48px;
  display: flex;
  justify-content: center;
  position: relative;
  font-size: 16px;
  color: #FFFFFF;
  font-weight: 500;
  border-bottom: 1px solid #1D1B43;
  background: #131232;
  border-radius: 15px 15px 0 0;

  .close_icon {
    position: absolute;
    right: 10px;
    top: 14px;
  }
}

.popup-body {
  width: calc(100vw - 30px);
  min-height: 150px;
  background: #131232;
  border-radius: 0 0 15px 15px;
  box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

}
</style>